<!-- 出栏数量 -->
<template>
	<border cardTitle="出栏数量">
		<div class="listbox">
			<div class="line"></div>
			<div :data="list" style="height: 100%" :class-option="optionSingleHeight" class="seamless-warp">
				<div class="list flex flex-v">
					<div class="list-item flex-1 flex flex-align-center" v-for="(item, index) in list" :key="index">
						<div class="name">{{ item.name }}</div>
						<div class="progress flex-1"><div class="progress_bg" :style="{ width: item.perc + '%' }"></div></div>
						<div class="num">
							<span>{{ item.num }}</span>
							<span class="unit">{{ item.num > 10000 ? '万' : '' }}头</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</border>
</template>
<script>
import border from '../border.vue';
import { bigScreenApi } from '@/api/index';
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
	components: { border, vueSeamlessScroll },
	data() {
		return {
			list: []
		};
	},
	computed: {
		// 滚动动画
		optionSingleHeight() {
			return {
				singleHeight: 36,
				waitTime: 2500,
				// step: 1,
				direction: 1,
				limitMoveNum: 2,
				openWatch: true
			};
		}
	},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		areaList: {
			type: [Array],
			default: () => []
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},
	created() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			this.$postAction(bigScreenApi.publishCount, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;
					console.log(cowData);
					this.list = cowData.map(item => {
						return {
							name: item.xzqhmc,
							num: item.publishCount
						};
					});
					let total = this.list.reduce((total, item) => {
						return (total += item.num);
					}, 0);
					this.list.forEach(item => {
						item.perc = ((item.num * 100) / total).toFixed(2);
					});
					this.list = this.list.sort(this.compare('num'));
					console.log(this.list);
				}
			});
		},
		compare(property) {
			return function (a, b) {
				var value1 = a[property];
				var value2 = b[property];
				return value2 - value1;
			};
		}
	}
};
</script>

<style scoped lang="less">
/deep/ .listbox {
	margin: 0.2rem 0.23rem 0.2rem 0.63rem;
	height: calc(100% - 0.2rem);
	overflow: hidden;
	position: relative;
	.line {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 4.5em;
		width: 1px;
		background: #535b65;
	}
}
.list {
	height: 100%;
}
.list-item {
	color: #ffffff;
	.list-item + .list-item {
		margin-top: 0.15rem;
	}
	.name {
		width: 4em;
		margin-right: 0.5em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.progress {
		width: 2.5rem;
		.progress_bg {
			background: linear-gradient(90deg, rgba(63, 149, 206, 0.3) 0%, #28f3f3 100%);
			height: 0.12rem;
		}
	}
	.num {
		margin-left: 0.32rem;
		width: 6em;
		.unit {
			color: #9cadd1;
		}
	}
}
</style>
